import './App.css'
import React, { useState } from 'react'
import { ShareSheet, Cell } from 'react-vant'
import { Toast, NavBar } from 'react-vant';
import { ProductCard, Tag, Button } from 'react-vant';
import { SubmitBar } from 'react-vant'
import { InfoO } from '@react-vant/icons'



function App() {
  const options = [
    { name: '微信', icon: 'wechat' },
    { name: '支付宝', icon: 'weibo' },
    { name: '建行龙支付', icon: 'link' },
    { name: '招商银行一网通', icon: 'poster' },
  ]
  const [visible, setVisible] = useState(false)

  return (
    <div style={{ width: '100vw' }}>
      <NavBar
        title="购物车"
        leftText=""
        rightText="编辑"
        onClickLeft={() => Toast('返回')}
        onClickRight={() => Toast('编辑')}
      />
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <p>全部(5)</p>
        <p>常买(2)</p>
      </div>
      <ProductCard
        num="2"
        price="2.00"
        desc="描述信息"
        title="商品名称"
        thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
      />
      <ProductCard
        num="2"
        price="2.00"
        desc="描述信息"
        title="商品名称"
        thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
      />
      <ProductCard
        num="2"
        price="2.00"
        desc="描述信息"
        title="商品名称"
        thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
      />
      <p style={{ display: "flex", justifyContent: 'space-around' }}>打包费<span>￥2</span></p>
      <p style={{ display: "flex", justifyContent: 'space-around' }}>配送费<span>￥4</span></p>
      <p style={{ display: "flex", justifyContent: 'space-around' }}>店铺满减<span style={{ color: "red" }}>-￥1</span></p>
      <p style={{ display: "flex", justifyContent: 'space-around' }}>平台红包<span style={{ color: "red" }}>1张可用</span></p>
      <p style={{ display: "flex", justifyContent: 'space-around' }}>商家代金券<span style={{ color: "red" }}>-￥5</span></p>
      <SubmitBar price="3050" buttonText="提交订单" onSubmit={() => setVisible(true)} />
      <ShareSheet
        visible={visible}
        options={options}
        title='立即结算104￥'
        onCancel={() => setVisible(false)}
        onSelect={(option, index) => {
          console.log('option', option)
          console.log('index', index)
          setVisible(false)
        }}
      />
    </div>
  )
}

export default App
